<template>
  <view class="my-points">
    <view class="title">
      <text class="figure">{{messageInfo.exchangeAmount}}</text>
      <text class="yue">购物券余额</text>
    </view>
    <view class="main">
      <!-- <lgd-tab textColor='#333333' :tabValue="tabValue" @getIndex="getIndex" /> -->
	  <view class="" v-if="list.length">
	  	<view class="left" v-for="(item,index) in list" :key='index'>
	  	  <view class="row-left">
	  	    <view class="row1">订单编号：{{item.OrderNo}}</view>
	  	    <view class="row2">{{item.createdOn}}</view>
	  	  </view>
	  	  <view class="row-right" :style="item.fundType == 10 ? 'color:#888' : ''"><text>{{item.fundType == 10 ? '-' : '+'}}{{item.payBalance}}</text></view>
	  	</view>
	  </view>
      <view class="nodata flex_center" v-else>
      	~暂无数据~
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabValue: ['拼团返还', '组团奖励'],
      index: 0,
	  pageIndex:1,
	  pageSize:10,
	  list:[1,1,1,1,11,1,1],
	  finish:false,
	  messageInfo:{}
    };
  },
  methods: {
    getIndex(index) {
      this.index = index;
    },
		getlist() {
			this.$ajax('api/Balance/QueryExchangeAmountDetail', { pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
				this.messageInfo = res.Data
				if (res.Data.list.length) {
					this.list = this.list.concat(res.Data.list);
					this.pageIndex++;
					this.finish = false;
				} else {
					this.finish = true;
				}
				uni.hideLoading();
			});
		}
	},
	onShow() {
		this.pageIndex = 1
		this.list = []
		this.getlist();
	},
	onReachBottom() {
		uni.showLoading({
			title: '加载中'
		});
		if (!this.finish) {
			this.getlist();
		}else{
			uni.hideLoading()
		}
	}
};
</script>

<style lang="scss">
.my-points {
  width: 100vw;
  min-height: 100vh;
  padding: 0 0 1px;
  background-color: #e9eaed;
  .title {
    width: 750rpx;
    height: 298rpx;
    background-color: #202029;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .figure {
      font-size: 48rpx;
      color: #ffffff;
      margin-bottom: 76rpx;
    }
    .yue {
      font-size: 28rpx;
      color: #bebee9;
    }
  }
  .main {
    // background-color: #FFFFFF;
    .left {
      width: 93%;
      height: 155rpx;
	  background: #fff;
      display: flex;
      margin:20rpx auto;
	  border-radius: 10rpx;
	  padding: 0 30rpx;
      border-top: 1rpx solid #e0e0e0;
      border-bottom: 1rpx solid #e0e0e0;
      .row-left {
        flex: 10%;
        height: 155rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 24rpx;
        color: #999;
      }
      .row-right {
        color: #f36450;
        font-size: 36rpx;
        font-weight: 700;
        line-height: 155rpx;
      }
    }

    .right {
      width: 620rpx;
      height: 155rpx;
      display: flex;
      margin-left: 70rpx;
      border-top: 1rpx solid #e0e0e0;
      border-bottom: 1rpx solid #e0e0e0;
      .row-left {
        flex: 10%;
        height: 155rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 24rpx;
        color: #999;
      }
      .row-right {
        color: #f36450;
        font-size: 36rpx;
        font-weight: 700;
        line-height: 155rpx;
        margin-right: 40rpx;
      }
    }
  }
}
</style>
